<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>中秋-微场景</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- Demo styles -->
</head>
<body>
    <!--音乐-->
    <audio src="zhongqiu.mp3" id="audio" autoplay loop="loop"></audio>
    <img src="images/music.png" id="music" />
    <!--音乐结束-->
    <!-- Swiper -->https://git.oschina.net/houdunren/c73.git
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide first_scene">
                <div class="scene_bg">
                    <div class="top_part">
                        <img class="t_1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="images/first_scene_1.png">
                        <img class="t_2 ani" swiper-animate-effect="slideInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="images/first_scene_3.png">
                    </div>
                    <div class="center_part">
                        <img class="c_1 ani" swiper-animate-effect="slideInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="images/first_scene_2.png">
                    </div>
                    <div class="bottom_part">
                        <img class="b_1 ani" swiper-animate-effect="slideInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="images/first_scene_4.png">
                        <img class="b_2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s" src="images/first_scene_5.png">
                        <img class="b_3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="images/first_scene_6.png">
                        <img class="b_4 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.9s"src="images/first_scene_7.png">
                    </div>
                </div>
            </div>
            <div class="swiper-slide second_scene">
                <img class="scene_bg" src="images/second_scene_2.png">
                <img class="moon ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/second_scene_7.png">
                <img class="flower ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/second_scene_6.png">
                <img class="font ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/second_scene_5.png">
                <img class="fish ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/second_scene_1.png">
                <img class="lianhua1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/second_scene_3.png">
                <img class="lianhua2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/second_scene_4.png">
                <img class="info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="images/second_scene_8.png">
            </div>
            <div class="swiper-slide third_scene">
                <img src="images/third_scene_2.png" class="scene_bg">
                <img src="images/third_scene_1.png" class="big_flower ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
                <img src="images/third_scene_3.png" class="small_flower ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
                <img src="images/third_scene_4.png" class="font ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
            </div>  
            <div class="swiper-slide forth_scene">
                <img src="images/second_scene_2.png" class="scene_bg">
                <img src="images/forth_scene_1.png" class="big_moon ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0s">
            </div>  
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/swiper.animate1.0.2.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
           swiperAnimateCache(swiper); //隐藏动画元素  
           swiperAnimate(swiper); //初始化完成开始动画
        }, 
        onSlideChangeEnd: function(swiper){ 
           swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        } 
    });
    </script>
</body>
</html>